<template>
  <div>
    <a-card :bordered="false" v-if="tableId != 0" style="margin-bottom: 10px; height: calc(100vh - 172px)">
      <a-tabs default-active-key="2">
        <a-tab-pane key="1" tab="基本信息" force-render>
          <basic-info-form v-if="infoIsShow" ref="basicInfo" :info="info" style="height: calc(100vh - 280px); overflow: auto" />
        </a-tab-pane>
        <a-tab-pane key="2" tab="字段信息" force-render>
          <!-- 表格 -->
          <a-table ref="table" size="small" :scroll="{ x: 2000, y: 'calc(100vh - 320px)' }" bordered :columns="columns" :loading="tableLoading" :data-source="tableList" row-key="columnId" :pagination="false">
            <template slot="dragIcon">
              <a-icon type="drag" class="dragIconClass" />
            </template>
            <span slot="colSpanTitle">
              <span>
                <a-tooltip placement="topRight" style="cursor: help">
                  <template slot="title">
                    <span>该选项表示24栅格中<br />摆放控件的个数,通过右侧选项可快速将列表列数进行统一修改</span>
                  </template>
                  列数<a-icon type="question-circle" />
                </a-tooltip>
                <a-select style="width: 130px" :default-value="colSpanValue" >
                  <a-select-option :value="1">一列/24栅格</a-select-option>
                  <a-select-option :value="2">两列/12栅格</a-select-option>
                  <a-select-option :value="3">三列/8栅格</a-select-option>
                  <a-select-option :value="4">四列/6栅格</a-select-option>
                </a-select>
              </span>
            </span>
            <span slot="isColumnSortTitle">
              <a-tooltip placement="topRight" style="cursor: help">
                <template slot="title">
                  <span>该选项表示是否在列上生成排序功能<br />类型为用户或部门的列无法排序<br />如需排序请特殊处理，树和树表格不支持该功能</span>
                </template>
                排序<a-icon type="question-circle" />
              </a-tooltip>
            </span>
            <span slot="isQueryTitle">
              <a-tooltip placement="topRight" style="cursor: help">
                <template slot="title">
                  <span>该选项表示是否生成查询区条件<br />1：下拉多选和多选框不支持设置查询条件<br />2：日期需要区间查询，请指定between查询方式</span>
                </template>
                查询<a-icon type="question-circle" />
              </a-tooltip>
            </span>
            <span slot="isLogTitle">
              <a-tooltip placement="topRight" style="cursor: help">
                <template slot="title">
                  <span>该选项表示是否记录该字段的<br />变更日志例如：由X变为Y</span>
                </template>
                日志<a-icon type="question-circle" />
              </a-tooltip>
            </span>
            <template slot="columnName" slot-scope="text">
              <div style="width: 100px">
                <span>{{ text }}</span>
              </div>
            </template>
            <!-- 字段描述 -->
            <template slot="columnComment" slot-scope="text, record">
              <a-input v-model="record.columnComment" style="width: 90px" :disabled="checkDisabledColumn(record)"></a-input>
            </template>
            <!-- Java类型 -->
            <template slot="javaType" slot-scope="text, record">
              <!--在锁定列环境下下拉框无法跟随滚动 -->
              <a-select v-model="record.javaType" @dropdownVisibleChange="javaTypeVisible(record)" @change="javaTypeChange(record)" style="width: 90px" :disabled="checkDisabledColumn(record)">
                <a-select-option v-for="(value, index) in javaTypeList" :key="index" :value="value" :title="value">
                  {{ value }}
                </a-select-option>
              </a-select>
            </template>
            <!-- 编辑 -->
            <template slot="isEdit" slot-scope="text, record">
              <a-checkbox v-model="record.isEdit" :disabled="checkDisabledColumn(record)"></a-checkbox>
            </template>
            <!-- 列表 -->
            <template slot="isList" slot-scope="text, record">
              <a-checkbox v-model="record.isList" :disabled="checkDisabledColumn(record)"></a-checkbox>
            </template>
            <!-- 查询 -->
            <template slot="isQuery" slot-scope="text, record">
              <a-checkbox v-model="record.isQuery" :disabled="checkDisabledColumn(record)"></a-checkbox>
            </template>
            <!-- 日志 -->
            <template slot="isLog" slot-scope="text, record">
              <a-checkbox v-model="record.isLog" :disabled="checkDisabledColumn(record)"></a-checkbox>
            </template>
            <template slot="isColumnSort" slot-scope="text, record">
              <a-checkbox v-model="record.isColumnSort" :disabled="checkDisabledColumn(record)"></a-checkbox>
            </template>
            <!-- 查询方式 -->
            <template slot="queryType" slot-scope="text, record">
              <a-select
                v-model="record.queryType"
                :getPopupContainer="
                  triggerNode => {
                    return triggerNode.parentNode || document.body
                  }
                "
                style="width: 100%"
                :disabled="checkDisabledColumn(record)"
              >
                <a-select-option value="EQ">=</a-select-option>
                <a-select-option value="NE">!=</a-select-option>
                <a-select-option value="GT">></a-select-option>
                <a-select-option value="GTE">>=</a-select-option>
                <a-select-option value="LT">&lt;</a-select-option>
                <a-select-option value="LTE">&lt;=</a-select-option>
                <a-select-option value="LIKE">LIKE</a-select-option>
                <a-select-option value="BETWEEN">BETWEEN</a-select-option>
              </a-select>
            </template>
            <!-- 查询方式 -->
            <template slot="alignType" slot-scope="text, record">
              <a-select
                v-model="record.alignType"
                :getPopupContainer="
                  triggerNode => {
                    return triggerNode.parentNode || document.body
                  }
                "
                style="width: 100%"
                :disabled="checkDisabledColumn(record)"
              >
                <a-select-option value="center">居中</a-select-option>
                <a-select-option value="left">居左</a-select-option>
                <a-select-option value="right">居右</a-select-option>
              </a-select>
            </template>
            <!-- 必填 -->
            <template slot="isRequired" slot-scope="text, record">
              <a-checkbox v-model="record.isRequired" :disabled="checkDisabledColumn(record)"></a-checkbox>
            </template>
            <!-- 唯一性 -->
            <template slot="isUnique" slot-scope="text, record">
              <a-checkbox v-model="record.isUnique" :disabled="checkDisabledColumn(record)"></a-checkbox>
            </template>
            <!-- 新行 -->
            <template slot="isNewRow" slot-scope="text, record">
              <a-checkbox v-model="record.isNewRow" :disabled="checkDisabledColumn(record)"></a-checkbox>
            </template>
            <!-- 列数 -->
            <template slot="colSpan" slot-scope="text, record">
              <a-select
                v-model="record.colSpan"
                style="width: 100%"
                :getPopupContainer="
                  triggerNode => {
                    return triggerNode.parentNode || document.body
                  }
                "
                :disabled="checkDisabledColumn(record)"
              >
                <a-select-option :value="1" v-if="colSpanValue >= 1">一列/24栅格</a-select-option>
                <a-select-option :value="2" v-if="colSpanValue >= 2">两列/12栅格</a-select-option>
                <a-select-option :value="3" v-if="colSpanValue >= 3">三列/8栅格</a-select-option>
                <a-select-option :value="4" v-if="colSpanValue >= 4">四列/6栅格</a-select-option>
              </a-select>
            </template>
            <!-- 显示类型 -->
            <template slot="htmlType" slot-scope="text, record">
              <a-select
                v-model="record.htmlType"
                :getPopupContainer="
                  triggerNode => {
                    return triggerNode.parentNode || document.body
                  }
                "
                @dropdownVisibleChange="htmlTypeVisible(record)"
                style="width: 100%"
                :disabled="checkDisabledColumnType(record)"
              >
                <a-select-option v-for="(item, index) in htmlTypeList" :key="index" :value="item.code">
                  {{ item.label }}
                </a-select-option>
              </a-select>
            </template>
            <!-- 字典类型 -->
            <template slot="dictType" slot-scope="text, record">
              <a-select
                v-model="record.dictType"
                :getPopupContainer="
                  triggerNode => {
                    return triggerNode.parentNode || document.body
                  }
                "
                placeholder="请选择"
                style="width: 100%"
                show-search
                :disabled="checkDisabledColumn(record, 'dictType')"
              >
                <a-select-option value="">请选择</a-select-option>
                <a-select-option v-for="item in dictOptions" :key="item.dictType" :value="item.dictType">
                  {{ item.dictName }}
                </a-select-option>
              </a-select>
            </template>
            <!-- 字段校验 -->
            <template slot="colCheck" slot-scope="text, record">
              <a-select
                v-model="record.colCheck"
                :getPopupContainer="
                  triggerNode => {
                    return triggerNode.parentNode || document.body
                  }
                "
                style="width: 100%"
                mode="multiple"
                :disabled="checkDisabledColumn(record)"
              >
                <a-select-option value="">请选择</a-select-option>
                <a-select-option value="date">日期</a-select-option>
                <a-select-option value="number">数值</a-select-option>
                <a-select-option value="integer">整数</a-select-option>
                <a-select-option value="positiveInteger">正整数</a-select-option>
                <a-select-option value="phone">手机号</a-select-option>
                <a-select-option value="tel">固定号码</a-select-option>
                <a-select-option value="zipCode">邮编</a-select-option>
                <a-select-option value="email">邮箱</a-select-option>
                <a-select-option value="qq">QQ号</a-select-option>
              </a-select>
            </template>
          </a-table>
        </a-tab-pane>
        <a-tab-pane key="3" tab="生成信息" force-render>
          <gen-info-form v-if="infoIsShow" ref="genInfo" :info="info" :menus="menus" :templateListOptions="templateListOptions" style="height: calc(100vh - 280px); overflow: auto" />
        </a-tab-pane>
      </a-tabs>
    </a-card>
    <a-card :bordered="false">
      <div style="text-align: right; padding: 5px">
        <a-space>
          <a-button type="primary" @click="submitForm"> 保存 </a-button>
          <a-button type="primary" @click="submitFormGenCode"> 保存并生成代码 </a-button>
          <a-button @click="back"> 取消 </a-button>
        </a-space>
      </div>
    </a-card>
  </div>
</template>

<script>
import { getGenTable, updateGenTable, updateGenTableNoValidated, genCode } from '@/api/tool/gen'
import { optionselect as getDictOptionselect } from '@/api/system/dict/type'
import { listMenu as getMenuTreeselect } from '@/api/system/menu'
import { listTemplate } from '@/api/tool/genConfigTemplate'
import { downLoadZip } from '@/utils/zipdownload'
import BasicInfoForm from './BasicInfoForm'
import GenInfoForm from './GenInfoForm'
import Sortable from 'sortablejs' // 列交换第三方插件
import storage from 'store'
export default {
  name: 'GenEdit',
  components: {
    BasicInfoForm,
    GenInfoForm
  },
  data() {
    return {
      colSpanValue: 2,
      tableId: 0,
      formTitle: '修改生成配置',
      // 表格加载
      tableLoading: false,
      infoIsShow: false,
      // 字典信息
      dictOptions: [],
      templateListOptions: [],
      javaTypeList: ['Long', 'String', 'Integer', 'Double', 'BigDecimal', 'Date', 'DateTime'],
      htmlTypeList: [
        { code: 'input', label: '文本框' },
        { code: 'number', label: '数字框' },
        { code: 'textarea', label: '文本域' },
        { code: 'select', label: '下拉框' },
        { code: 'selectMultiple', label: '下拉框（多选）' },
        { code: 'radio', label: '单选框' },
        { code: 'radioButton', label: '单选按钮' },
        { code: 'checkbox', label: '复选框' },
        { code: 'datetime', label: '日期控件' },
        { code: 'time', label: '时间' },
        { code: 'user', label: '用户控件' },
        { code: 'dept', label: '部门控件' }
      ],
      disabledColumn: ['id', 'create_by', 'create_dept', 'create_time', 'update_by', 'update_time', 'update_ip', 'version', 'del_flag'],
      // 菜单信息
      menus: [],
      // 表详细信息
      info: {},
      // 表数据
      tableList: [],
      // 表数据
      tableListTemp: [],
      // 表头
      columns: [
        {
          dataIndex: 'sort',
          align: 'center',
          width: 50
        },
        {
          title: '字段',
          children: [
            {
              scopedSlots: {
                customRender: 'dragIcon'
              },
              align: 'center',
              width: 30
            },
            {
              title: '字段列名',
              dataIndex: 'columnName',
              align: 'left',
              ellipsis: true,
              scopedSlots: {
                customRender: 'columnName'
              },
              width: 110
            },
            {
              title: '物理类型',
              dataIndex: 'columnType',
              scopedSlots: {
                customRender: 'columnType'
              },
              align: 'left',
              width: 110
            },
            {
              title: 'Java类型',
              dataIndex: 'javaType',
              scopedSlots: {
                customRender: 'javaType'
              },
              align: 'left',
              width: 100
            },
            {
              title: 'java属性',
              dataIndex: 'javaField',
              scopedSlots: {
                customRender: 'javaField'
              },
              align: 'left',
              ellipsis: true,
              width: 120
            },
            {
              title: '字段描述',
              dataIndex: 'columnComment',
              scopedSlots: {
                customRender: 'columnComment'
              },
              align: 'center',
              width: 100
            }
          ]
        },
        {
          title: '表单',
          children: [
            {
              title: '编辑',
              dataIndex: 'isEdit',
              scopedSlots: {
                customRender: 'isEdit'
              },
              align: 'center',
              width: '50px'
            },
            {
              title: '必填',
              dataIndex: 'isRequired',
              scopedSlots: {
                customRender: 'isRequired'
              },
              align: 'center',
              width: '50px'
            },
            {
              title: '唯一性',
              dataIndex: 'isUnique',
              scopedSlots: {
                customRender: 'isUnique'
              },
              align: 'center',
              width: '80px'
            },
            {
              title: '显示类型',
              dataIndex: 'htmlType',
              scopedSlots: {
                customRender: 'htmlType'
              },
              align: 'center',
              width: '150px'
            },
            {
              dataIndex: 'colSpan',
              scopedSlots: {
                customRender: 'colSpan'
              },
              slots: { title: 'colSpanTitle' },
              align: 'center',
              width: '180px'
            },
            {
              title: '新行',
              dataIndex: 'isNewRow',
              scopedSlots: {
                customRender: 'isNewRow'
              },
              align: 'center',
              width: '50px'
            },
            {
              title: '字典类型',
              dataIndex: 'dictType',
              scopedSlots: {
                customRender: 'dictType'
              },
              align: 'center',
              width: 110
            },
            {
              dataIndex: 'isLog',
              scopedSlots: {
                customRender: 'isLog'
              },
              slots: { title: 'isLogTitle' },
              align: 'center',
              width: '80px'
            },
            {
              title: '字段校验',
              dataIndex: 'colCheck',
              scopedSlots: {
                customRender: 'colCheck'
              },
              align: 'center',
              width: 120
            }
          ]
        },
        {
          title: '列表',
          children: [
            {
              title: '列表',
              dataIndex: 'isList',
              scopedSlots: {
                customRender: 'isList'
              },
              align: 'center',
              width: '3%'
            },
            {
              dataIndex: 'isColumnSort',
              scopedSlots: {
                customRender: 'isColumnSort'
              },
              slots: { title: 'isColumnSortTitle' },
              align: 'center',
              width: '5%'
            },
            {
              dataIndex: 'isQuery',
              scopedSlots: {
                customRender: 'isQuery'
              },
              slots: { title: 'isQueryTitle' },
              align: 'center',
              width: '5%'
            },
            {
              title: '查询方式',
              dataIndex: 'queryType',
              scopedSlots: {
                customRender: 'queryType'
              },
              align: 'center',
              width: '8%'
            },
            {
              title: '对齐方式',
              dataIndex: 'alignType',
              scopedSlots: {
                customRender: 'alignType'
              },
              align: 'center',
              width: '8%'
            }
          ]
        }
      ]
    }
  },
  watch: {
    $route(to, from) {
      if (to.name === 'GenEdit') {
        const tableId = to.params.tableId
        if (tableId) {
          this.tableId = tableId
        } else {
          const genTableId = 'genTableId'
          this.tableId = storage.get(genTableId)
        }
        this.tableLoading = true
        this.getGenTableInfo()
      }
    },
    colSpanValue(val, oldVal) {
      this.tableList.forEach(function (record) {
        if (record.colSpan !== 0) {
          record.colSpan = 1
        }
      })
    }
  },
  created() {
    const tableId = this.$route.params && this.$route.params.tableId
    if (tableId) {
      this.tableId = tableId
    } else {
      const genTableId = 'genTableId'
      this.tableId = storage.get(genTableId)
    }
    this.tableLoading = true
    if (this.tableId) {
      /** 查询字典下拉列表 */
      getDictOptionselect().then(response => {
        this.dictOptions = response.data
      })
      /** 查询菜单下拉列表 */
      getMenuTreeselect(undefined,undefined,'3').then(response => {
        this.menus = response.data
      })
      listTemplate().then(response => {
        this.templateListOptions = response.data.list
      })
      this.getGenTableInfo()
    }
  },
  methods: {
    getGenTableInfo() {
      // 获取表详细信息
      getGenTable(this.tableId).then(res => {
        const tableList = res.data.rows
        this.tableListTemp = JSON.parse(JSON.stringify(tableList))
        tableList.forEach(e => {
          e.isInsert = e.isInsert === '1'
          e.isEdit = e.isEdit === '1'
          e.isList = e.isList === '1'
          e.isNewRow = e.isNewRow === '1'
          e.isQuery = e.isQuery === '1'
          e.isUnique = e.isUnique === '1'
          e.isLog = e.isLog === '1'
          e.isColumnSort = e.isColumnSort === '1'
          e.isRequired = e.isRequired === '1'
          e.colCheck = e.colCheck !== '' && e.colCheck !== null ? e.colCheck.split(',') : []
        })
        this.tableList = tableList
        this.colSpanValue = res.data.info.colSpans
        this.info = res.data.info
        this.tableLoading = false
        this.rowDrop()
        this.infoIsShow = true
      })
    },
    /**
     * 校验行是否可以编辑
     */
    checkDisabledColumnType(record, type) {
      let superColumn = record.superColumn
      const htmlType = record.htmlType
      if (type === 'dictType') {
        if (htmlType !== 'select' && htmlType !== 'selectMultiple' && htmlType !== 'radio' && htmlType !== 'radioButton' && htmlType !== 'checkbox') {
          superColumn = true
          // 清除数据
          record.dictType = ''
        }
      }
      const queryType = record.queryType
      if (htmlType === 'input' || htmlType === 'textarea') {
        // 设置字段居中方式
        record.alignType = 'left'
        if (queryType !== 'EQ' && queryType !== 'LIKE') {
          record.queryType = 'LIKE'
        }
      } else if (htmlType === 'number') {
        // 设置字段居中方式
        record.alignType = 'right'
        if (queryType === 'LIKE') {
          record.queryType = 'EQ'
        }
      } else if (htmlType === 'select' || htmlType === 'radio' || htmlType === 'radioButton' || htmlType === 'checkbox' || htmlType === 'selectMultiple') {
        // 设置字段居中方式
        record.alignType = 'center'
        if (queryType === 'LIKE') {
          record.queryType = 'EQ'
        }
      } else if (htmlType === 'time' || htmlType === 'datetime') {
        if (queryType === 'LIKE') {
          record.queryType = 'EQ'
        }
        // 设置字段居中方式
        record.alignType = 'center'
      }
      return superColumn
    },
    /**
     * 校验行是否可以编辑
     */
    checkDisabledColumn(record, type) {
      let superColumn = record.superColumn
      const htmlType = record.htmlType
      if (type === 'dictType') {
        if (htmlType !== 'select' && htmlType !== 'selectMultiple' && htmlType !== 'radio' && htmlType !== 'radioButton' && htmlType !== 'checkbox') {
          superColumn = true
          // 清除数据
          record.dictType = ''
        }
      }
      return superColumn
    },
    javaTypeVisible(record) {
      // 根据页面加载的java类型初始化下拉框，页面加载的值为后台计算好的
      const javaType = record.javaType
      if (javaType === 'Long' || javaType === 'Integer' || javaType === 'Double' || javaType === 'BigDecimal') {
        this.javaTypeList = ['Long', 'Integer', 'Double', 'BigDecimal']
      } else if (javaType === 'Date' || javaType === 'DateTime') {
        this.javaTypeList = ['Date', 'DateTime']
      } else {
        this.javaTypeList = ['String']
      }
    },
    htmlTypeVisible(record) {
      const javaType = record.javaType
      if (javaType === 'Long' || javaType === 'Integer' || javaType === 'Double' || javaType === 'BigDecimal') {
        this.htmlTypeList = [{ code: 'number', label: '数字框' }]
      } else if (javaType === 'Date' || javaType === 'DateTime') {
        this.htmlTypeList = [
          { code: 'datetime', label: '日期控件' },
          { code: 'time', label: '时间控件' }
        ]
      } else {
        this.htmlTypeList = [
          { code: 'input', label: '文本框' },
          { code: 'textarea', label: '文本域' },
          { code: 'select', label: '下拉框' },
          { code: 'selectMultiple', label: '下拉框（多选）' },
          { code: 'radio', label: '单选框' },
          { code: 'radioButton', label: '单选按钮' },
          { code: 'user', label: '用户控件' },
          { code: 'dept', label: '部门控件' },
          { code: 'checkbox', label: '复选框' }
        ]
      }
    },
    dictTypeVisible(record) {
      const htmlType = record.htmlType
      if (htmlType !== 'select' && htmlType !== 'selectMultiple' && htmlType !== 'radio' && htmlType !== 'radioButton' && htmlType !== 'checkbox') {
        this.$message.error('请选择')
        return false
      }
    },
    /** 提交按钮 */
    submitForm() {
      this.tableLoading = true
      const basicForm = this.$refs.basicInfo.info
      const genForm = this.$refs.genInfo.info
      if (basicForm && genForm) {
        const genTable = Object.assign({}, basicForm, genForm)
        const tableList = JSON.parse(JSON.stringify(this.tableList))
        tableList.forEach(e => {
          e.isInsert = e.isInsert ? '1' : '0'
          e.isEdit = e.isEdit ? '1' : '0'
          e.isNewRow = e.isNewRow ? '1' : '0'
          e.isList = e.isList ? '1' : '0'
          e.isQuery = e.isQuery ? '1' : '0'
          e.isUnique = e.isUnique ? '1' : '0'
          e.isLog = e.isLog ? '1' : '0'
          e.isColumnSort = e.isColumnSort ? '1' : '0'
          e.isRequired = e.isRequired ? '1' : '0'
          e.colCheck = e.colCheck.join(',')
        })
        genTable.columns = tableList
        genTable.colSpans = this.colSpanValue
        genTable.params = {
          treeCode: genTable.treeCode,
          treeName: genTable.treeName,
          treeParentCode: genTable.treeParentCode,
          parentMenuId: genTable.parentMenuId,
          menuIcon: genTable.menuIcon,
          attachOption: genTable.attachOption,
          disableEnableOption: genTable.disableEnableOption,
          saveAndAddOption: genTable.saveAndAddOption,
          copyRecordOption: genTable.copyRecordOption
        }
        updateGenTableNoValidated(genTable)
          .then(res => {
            if (res.code === 200) {
              this.$message.success(res.msg)
              this.tableLoading = false
              this.back()
            } else {
              this.$message.error(res.msg)
              this.tableLoading = false
            }
          })
          .finally(() => {
            this.tableLoading = false
          })
      } else {
        this.msgError('表单校验未通过，请重新检查提交内容')
        this.tableLoading = false
      }
    },
    /** 生成代码按钮 */
    submitFormGenCode() {
      this.tableLoading = true
      const basicForm = this.$refs.basicInfo.info
      const genForm = this.$refs.genInfo.info
      if (basicForm && genForm) {
        const genTable = Object.assign({}, basicForm, genForm)
        const tableList = JSON.parse(JSON.stringify(this.tableList))
        tableList.forEach(e => {
          e.isInsert = e.isInsert ? '1' : '0'
          e.isEdit = e.isEdit ? '1' : '0'
          e.isNewRow = e.isNewRow ? '1' : '0'
          e.isList = e.isList ? '1' : '0'
          e.isQuery = e.isQuery ? '1' : '0'
          e.isUnique = e.isUnique ? '1' : '0'
          e.isLog = e.isLog ? '1' : '0'
          e.isColumnSort = e.isColumnSort ? '1' : '0'
          e.isRequired = e.isRequired ? '1' : '0'
          e.colCheck = e.colCheck.join(',')
        })
        genTable.columns = tableList
        genTable.tableSource = genTable.formDataSource
        genTable.colSpans = this.colSpanValue
        genTable.params = {
          treeCode: genTable.treeCode,
          treeName: genTable.treeName,
          treeParentCode: genTable.treeParentCode,
          parentMenuId: genTable.parentMenuId,
          menuIcon: genTable.menuIcon,
          attachOption: genTable.attachOption,
          disableEnableOption: genTable.disableEnableOption,
          saveAndAddOption: genTable.saveAndAddOption,
          copyRecordOption: genTable.copyRecordOption
        }
        updateGenTable(genTable)
          .then(res => {
            if (res.code === 200) {
              if (genTable.genType === '1') {
                genCode({ tableName: genTable.tableName, dataSource: genTable.formDataSource }).then(response => {
                  this.$notification.open({
                    message: '提示',
                    description: response.msg,
                    duration: 3
                  })
                  this.tableLoading = false
                })
              } else {
                downLoadZip('/tool/gen/batchGenCode?tables=' + genTable.tableName, 'aidex')
              }

              this.back()
            } else {
              this.$message.error(res.msg)
              this.tableLoading = false
            }
          })
          .finally(() => {
            this.tableLoading = false
          })
      } else {
        this.msgError('表单校验未通过，请重新检查提交内容')
        this.tableLoading = false
      }
    },
    /** 关闭按钮 */
    back() {
      this.$router.push('/tool/gen')
    },
    /**
     * 行拖拽事件
     */
    rowDrop() {
      const that = this
      this.$nextTick(() => {
        const xGrid = this.$refs.table
        const el = xGrid.$el.querySelector('.ant-table tbody')
        this.sortable = Sortable.create(el, {
          handle: '.dragIconClass',
          animation: 100,
          delay: 100,
          chosenClass: 'drag-list-color', // 被选中项的css 类名
          dragClass: 'drag-list-color', // 正在被拖拽中的css类名
          onEnd: ({ newIndex, oldIndex }) => {
            const currRow = that.tableList.splice(oldIndex, 1)[0]
            that.tableList.splice(newIndex, 0, currRow)
            this.$emit('rowDrop', that.tableList)
            that.tableList.forEach(function (item, index) {
              item.sort = that.tableListTemp[index].sort
            })
          },
          onUpdate(event) {
            const newIndex = event.newIndex
            const oldIndex = event.oldIndex
            const $body = el
            const $tr = $body.children[newIndex]
            const $oldTr = $body.children[oldIndex]
            // 先删除移动的节点
            $body.removeChild($tr)
            // 再插入移动的节点到原有节点，还原了移动的操作
            if (newIndex > oldIndex) {
              $body.insertBefore($tr, $oldTr)
            } else {
              $body.insertBefore($tr, $oldTr.nextSibling)
            }
          }
        })
      })
    }
  }
}
</script>
<style scoped lang="less">
/deep/.ant-table-body {
  height: calc(100vh - 280px);
}
.dragIconClass {
  font-size: 16px;
  font-weight: bold;
  padding-right: 0px;
}
.dragIconClass:hover {
  cursor: move;
}
</style>
